<template>
  <div class="echarts" ref="echartAnalysis1" style="width: 100%;height: 500px"></div>
</template>

<script>
import {reactive} from "@vue/reactivity";
import {getCurrentInstance,watch} from "vue";
import ecStat from 'echarts-stat';

export default {
  name: "analysis1_chart",
  props: ['plotdata'],
  setup(){
    const { proxy } = getCurrentInstance();
    console.log("proxy.$props.plotdata",proxy.$props)
    watch(()=>proxy.$props.plotdata,()=>{
      console.log("watch",proxy.$props.plotdata)
      getOption()
    })
    // proxy.$echarts.registerTransform(ecStat.regression);
    const option = reactive({
      // dataset: [
      //   {
      //     source: []
      //   },
      //   {
      //     transform: {
      //       type: 'ecStat:regression'
      //       // 'linear' by default.
      //       // config: { method: 'linear', formulaOn: 'end'}
      //     }
      //   }
      // ],
      title: {
        text: '',
        subtext: '',
        // sublink: 'https://github.com/ecomfe/echarts-stat',
        left: 5
      },
      legend: {
        top: 5,
        right: 5,
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        }
      },
      xAxis: {
        type: 'value',
        name: 'Difference in methylation (Allele. alt - Allele. ref)',
        nameLocation: 'middle',
        nameGap: 50, // 调整标题与坐标轴的距离
        nameTextStyle: {
          align: 'center', // 横坐标标题居中显示
          verticalAlign: 'bottom'
        },
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        }
      },
      yAxis: {
        type: 'value',
        name: 'Difference in binding score（Allele. alt - Allele. ref）',
        nameLocation: 'middle', // 标题位置（可选 start/middle/end）
        nameGap: 50, // 调整标题与坐标轴的距离
        nameRotate: 90, // 纵坐标标题旋转90度，使其垂直显示
        nameTextStyle: {
          align: 'center',
          verticalAlign: 'start'
        },
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        }
      },
      series: []
    });
    const getOption = () => {
      option.series = []
      let plotdata = proxy.$props.plotdata
      // console.log("analysis1 plotdata.data =>",plotdata.data)
      option.title.subtext = "R²: "+numDelivery(parseFloat(plotdata.R))+"\n"+"P = "+numDelivery(parseFloat(plotdata.P))
      for (let i = 0; i < plotdata.data.length; i++){
        plotdata.data[i][0] = parseFloat(plotdata.data[i][0])
        plotdata.data[i][1] = parseFloat(plotdata.data[i][1])
      }
      let regressionDemo = ecStat.regression('linear', plotdata.data,1);
      regressionDemo.points.sort(function(a, b) {
        return a[0] - b[0];
      });
      for (let i = 0; i < plotdata.type.length; i++) {
        option.series.push({
          name: plotdata['data'+i].type,
          type: 'scatter',
          data: plotdata['data'+i].data,
        })
      }
      option.series.push({
        name: 'line',
        type: 'line',
        // datasetIndex: 1,
        data: regressionDemo.points,
        symbolSize: 0.1,
        symbol: 'circle',
        label: { show: false, fontSize: 16 },
        labelLayout: { dx: -20 },
        encode: { label: 2, tooltip: 1 }
      })
      // option.dataset[0].source = plotdata.data
      console.log("analysis1 chart =>",regressionDemo.parameter)
      rendeChart()
    }

    function numDelivery(num) {

      var result = parseFloat(num);

      if (isNaN(result)) {

        alert("传递参数错误，请检查！");

        return false;

      }

      result = Math.round(num * 100) / 100;

      return result;

    }

    function rendeChart() {
      const myeChart = proxy.$echarts.init(proxy.$refs.echartAnalysis1)
      myeChart.setOption(option)
    }

    setTimeout(()=>{
      // if (proxy.$props.plotdata === {}){
        rendeChart()
      // }else {
      //   getOption()
      // }

    },100)
  }
}
</script>

<style scoped>

</style>
